<template>
  <div class="goods-list">
    <Pane>
      <span slot="title">商品列表</span>
      <section slot="content">
        <el-table :data="tableData">
          <el-table-column type="expand" label="商品名称" width="200">
            <template slot-scope="scope">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品ID">
                  <span>{{scope.row.id}}</span>
                </el-form-item>
                <el-form-item label="商品名称">
                  <span>{{scope.row.name}}</span>
                </el-form-item>
                <el-form-item label="商品分类">
                  <span>{{scope.row.category}}</span>
                </el-form-item>
                <el-form-item label="商品价格">
                  <span>{{scope.row.price}}</span>
                </el-form-item>
                <el-form-item label="商品图片">
                  <span>
                    <img :src="imgBaseUrl+scope.row.imgUrl" alt class="goods-imgs" />
                  </span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{scope.row.goodsDesc}}</span>
                </el-form-item>
                <el-form-item label="商品评价">
                  <span>{{scope.row.rating}}</span>
                </el-form-item>
                <el-form-item label="商品时间">
                  <span>{{scope.row.ctime}}</span>
                </el-form-item>
                <el-form-item label="商品销量">
                  <span>{{scope.row.sellCount}}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>

          <!-- 所属分类-->
          <el-table-column label="所属分类" prop="category"></el-table-column>
          <el-table-column label="商品价格" prop="price" width="100"></el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img :src="imgBaseUrl+scope.row.imgUrl" alt class="goods-imgs" />
            </template>
          </el-table-column>
          <el-table-column label="商品描述" prop="goodsDesc" width="500"></el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作">
            <template>
              <el-button type="primary" size="small">编辑</el-button>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 6, 10]"
          :page-size="pageSize"
          layout="total, sizes,prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </section>
    </Pane>
  </div>
</template>

<script>
// 引入面板
import Pane from "@/components/Pane/Pane";
// 引入数据
import { getGoodsList } from "@/api/goods";
import moment from "moment";
export default {
  // 注册
  components: {
    Pane,
  },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 1,
      imgBaseUrl: "http://127.0.0.1:5000/upload/imgs/goods_img/",
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      let { total, data } = await getGoodsList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      // console.log(total, data);
      // 处理时间
      data.forEach((v) => {
        v.ctime = moment(v.ctime).format("YYYY-MM-DD HH:MM:SS");
      });
      if (!data.length && this.currentPage !== 1) {
        this.currentPage -= 1;
        this.init();
      }
      // 渲染
      this.total = total;
      this.tableData = data;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.init();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.init();
    },
  },
};
</script>

<style lang="less" scoped>
form.el-form.demo-table-expand.el-form--label-left.el-form--inline {
  display: flex;
  flex-direction: column;
}
.goods-imgs {
  width: 50px;
}
</style>